<template>
    <div class="top-count ">
      <div class="top-count-item" v-for="(item, index) in countList" :key="index">
        <div class="top-count-item-inner number-box">
          <p>{{item.name}}</p>
          <div class="number-value" :class="(item.name=='近30天开机率' || item.name=='近7天开机率')?'actived-style':''">
            <p v-if="!item.value">----</p>
            <div v-else>
              <ComNumberScroll
                  v-if="item.name=='活跃累计总量' || item.name=='近30天活跃应用' || item.name=='近7天活跃应用'"
                  :start="0" 
                  :end="item.value"
                  :autoPlay="true" 
                  :duration="1000"
                  :default="0"
                  showType="no-bg"/>
              <span v-else> {{item.value}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script setup>
import { getTotalActiveNum, 
           getStartTotal } from '@/api/sdk/sdk.js'
import { ref, onMounted } from "vue";
import ComNumberScroll from '@/components/public/ComNumberScroll/ComNumberScroll.vue';
const countList = ref([
    { name:'活跃累计总量',value: 0 },
    { name:'近30天活跃应用',value: 0 },
    { name:'近30天活跃比例',value: 0 },
    { name:'近7天活跃应用',value: 0 },
    { name:'近7天活跃比例',value: 0 },
  ]);

  // 活跃应用累计总量
  const loadNavData = async () => {
    await getTotalActiveNum().then(res => {
        const { data } = res.data
        countList.value[0].value = Number(data.total_active_num);
      })
    await getStartTotal().then(res => {
        const { data } = res.data
        countList.value[1].value = Number(data[0].last_30_days_active_num)
      })
      //近30天活跃比例
      if(countList.value[0].value && countList.value[1].value){
        countList.value[2].value = parseFloat(((countList.value[1].value / countList.value[0].value) * 100).toFixed(2)) + '%'
      }
      //近7天活跃应用
      await getStartTotal().then(res => {
          const { data } = res.data
          countList.value[3].value = Number(data[0].last_7_days_active_num)
        })
      //近7天活跃比例
      if(countList.value[0].value && countList.value[3].value){
        countList.value[4].value = parseFloat(((countList.value[3].value / countList.value[0].value) * 100).toFixed(2)) + '%'
      }
    }
  onMounted(() => {
    loadNavData()
  })  
</script>
<style lang="scss" scoped>
.top-count {
    width: 100%;
    padding-top: 90px;
    display: flex;
    align-items: center;
    border-radius: 3px;
    // margin-bottom: 10px;
    &-item{
      height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex: 1;
      margin-right: 30px;
      background: url('/src/assets/count_bg.png') no-repeat 0 0;
      background-size: 100% 100%;
      text-align: center;
      &:last-child{
        margin-right: 0px;
      }
      
      .number-box{
        p{
          font-size: 24px;
          color: #FFFFFF;
          opacity:  0.7;
          font-weight: 500;
        }
        .number-value{
          font-size: 36px;
          color: #FFFFFF;
          font-weight: 500;
          padding-top: 5px
        }
      }
    }
  }
  .actived-style{
    color: #FFD042 !important;
  }
</style>